<template>
  <div class="imageOcrad-container">
    <div class="image-wrap">
      <el-upload
        class="avatar-uploader-one"
        action
        :show-file-list="false"
        :before-upload="(file) => beforeAvatarUpload(file, 0)"
      >
        <img ref="imageOne" v-if="imageUrl0" :src="imageUrl0" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-upload
        class="avatar-uploader-one"
        action
        :show-file-list="false"
        :before-upload="(file) => beforeAvatarUpload(file, 1)"
      >
        <img ref="imageOne" v-if="imageUrl1" :src="imageUrl1" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

    <el-button type="primary" @click="getText">对比</el-button>

    <div class="text-result">
      <div>
        <h3>图一文本</h3>
        <p v-for="(item,i) in textOne.words_result" :key="i">{{item.words}}</p>
      </div>
      <div>
        <h3>图二文本</h3>
        <p v-for="(item,i) in textTwo.words_result" :key="i">{{item.words}}</p>
      </div>
      <div class="same">
        <h3>相同文本</h3>
        <p v-for="(item,i) in sameText" :key="i">{{item.words}}</p>
      </div>
      <div class="differentText">
        <h3>不同文本</h3>
        <p v-for="(item,i) in differentText" :key="i">{{item.words}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      imageUrl0: "",
      imageUrl1: "",
      files: [],
      textOne: [],
      textTwo: [],
      sameText: [],
      differentText: []
    };
  },
  methods: {
    ...mapActions({
      getImageText: "imageOcrad/getImageText"
    }),
    beforeAvatarUpload(file, index) {
      const isJPG = ["image/jpeg", "image/png"].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/png 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传大小不能超过 20MB!");
        return false;
      }

      this["imageUrl" + index] = URL.createObjectURL(file);
      this.files[index] = file;

      return false;
    },
    async getText() {
      if (this.files.length < 2) {
        this.$message.error("需要两张图片对比");
        return;
      }
      this.textOne = this.textTwo = this.sameText = this.differentText = [];

      let res = await this.getImageText( this.files);

      this.textOne = res[0];
      this.textTwo = res[1];
      let i = Math.min(
        this.textOne.words_result_num,
        this.textTwo.words_result_num
      );
      this.textOne.words_result.slice(0, i).forEach((item, i) => {
        if (item.words === this.textTwo.words_result[i].words) {
          this.sameText.push(item);
        } else {
          this.differentText.push(item);
        }
      });

      this.differentText = [
        ...this.differentText,
        ...this.textOne.words_result.slice(i),
        ...this.textTwo.words_result.slice(i)
      ];
    }
  }
};
</script>

<style lang="less" scoped>
.imageOcrad-container {
  .image-wrap {
    display: flex;
    height: 400px;
  }
  .avatar-uploader-one {
    flex: 1;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 300px;
      height: 400px;
    }
  }

  .text-result {
    display: flex;
    div {
      flex: 1;
    }
  }
}
</style>